{{extend '../layout/main.html'}}

{{block name="css"}}
<link rel="stylesheet" href="/css/wangeditor.css">
<style>
  .card-header {
    position: relative;
  }

  .card-header .add {
    position: absolute;
    right: 10px;
    top: 5px;
  }
</style>
{{/block}}

{{block name="js"}}
<script src="/js/wangeditor.js"></script>
<script>
  // 全局变量
  var E = window.wangEditor;
  window.editor = E.createEditor({
    selector: '#editor-text-area',
    html: '',
    config: {
      placeholder: '请输入内容',
      MENU_CONF: {
        fontSize: {
          fontSizeList: ['12px', '16px', '24px', '40px']
        },
        emotion: {
          emotions: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉'.split(' ')
        },
        uploadImage: {
          fieldName: 'your-fileName',
          base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
        }
      },
      // 内容有修改时它会触发
      onChange(editor) {
        document.querySelector('#body').value = editor.getHtml()
      }
    }
  })
  window.toolbar = E.createToolbar({
    editor,
    selector: '#editor-toolbar',
    config: {}
  })
</script>
{{/block}}

{{block name="content"}}
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid">

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3>添加新闻资讯内容</h3>
            <a href="/news/index" class="btn btn-primary add">返回列表</a>
          </div>
          <div class="card-body">
            <form class="form-horizontal" action="/news/create" method="post">
              <div class="form-group">
                <label class="col-xs-12" for="title">新闻标题：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="text" name="title" id="title">
                  <div class="help-block">新闻标题内容不能为空，要有实际的名称</div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="author">发布作者：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="text" name="author" id="author">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="desn">资讯描述：</label>
                <div class="col-xs-12">
                  <textarea class="form-control" id="desn" name="desn" rows="6" placeholder="内容.."></textarea>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="click">访问量：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="number" value="1000" name="click" id="click">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12">资讯标签：</label>
                <div class="col-xs-12">
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="劲爆">
                    劲爆
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="娱乐">
                    娱乐
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="学习">
                    学习
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12">封面：</label>
                <div class="col-xs-12">
                  <input type="hidden" value="/uploads/1650264543616-4653-6.jpg" name="pic" id="pic">
                  <input type="file" id="file">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="desn">正文：</label>
                <div class="col-xs-12">
                  <!-- 编辑器 DOM -->
                  <div style="border: 1px solid #ccc;">
                    <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                    <div id="editor-text-area" style="height: 500px"></div>
                  </div>
                  <input type="hidden" name="body" id="body">
                </div>
              </div>
              <hr>
              <div class="form-group">
                <div class="col-xs-12">
                  <button class="btn btn-primary" type="submit">添加新闻资讯内容</button>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>

    </div>

</main>
<!--End 页面主要内容-->
{{/block}}